<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <nav class="flex justify-between">
        <span>Blob转Base64</span>
        <el-link type="primary" target="_blank" href="https://vueuse.org/core/useBase64/">useBase64</el-link>
      </nav>
    </template>

    <input type="file" @change="onBlobToBase64" />
    <el-link type="primary" target="_blank" :href="url">url</el-link>
  </el-card>
</template>

<script setup lang="ts" name="useWindowSize">

import { useBase64 } from '@vueuse/core'
const onBlobToBase64 = async (event) => {
  const {execute} = useBase64(event.target.files[0])
  const res = await execute()
  console.log(res)
}
</script>

<style scoped lang="less">

</style>
